<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="hover" class="mgb20" style="height:400px;">
                    <div class="user-info">
                        <img src="../../assets/img/avatar2.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">林怀旭</div>
                            <!-- <div>{{userInfo.userRole == 'user' ? '普通用户':(userInfo.userRole=='admin'? '管理员':'维护者')}}</div> -->
                        </div>
                    </div>
                    <div class="user-info-list">
                        学&#12288;&#12288;号：
                        <span>212102</span>
                    </div>
                    <div class="user-info-list">
                        性&#12288;&#12288;别：
                        <span>男</span>
                    </div>
                    <div class="user-info-list">
                        出生日期：
                        <span>1999-03-21</span>
                    </div>
                    <div class="user-info-list">
                        学&#12288;&#12288;院：
                        <span>计算机科学与工程学院</span>
                    </div>
                    <div class="user-info-list">
                        专&#12288;&#12288;业：
                        <span>电子信息</span>
                    </div>
                    <div class="user-info-list">
                        邮&#12288;&#12288;箱：
                        <span>linhuaixu@126.com</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover" class="mgb20" style="height:400px;">
                    <div class="user-info">
                        <img src="../../assets/img/avatar1.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">朱守康</div>
                            <!-- <div>{{userInfo.userRole == 'user' ? '普通用户':(userInfo.userRole=='admin'? '管理员':'维护者')}}</div> -->
                        </div>
                    </div>
                    <div class="user-info-list">
                        学&#12288;&#12288;号：
                        <span>212105</span>
                    </div>
                    <div class="user-info-list">
                        性&#12288;&#12288;别：
                        <span>男</span>
                    </div>
                    <div class="user-info-list">
                        出生日期：
                        <span>1999-08-26</span>
                    </div>
                    <div class="user-info-list">
                        学&#12288;&#12288;院：
                        <span>计算机科学与工程学院</span>
                    </div>
                    <div class="user-info-list">
                        专&#12288;&#12288;业：
                        <span>电子信息</span>
                    </div>
                    <div class="user-info-list">
                        邮&#12288;&#12288;箱：
                        <span>2625852520@qq.com</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
       
export default {
    name: 'contactUs',
    
    data() {
        return {
            
        };
    },
    computed: {
        
    },
    created() {

    },
    methods: {
        
    }
};
</script>


<style scoped>
.loading{
    text-align: center;
}
.loading span {
  display: inline-block;
  width: 35px;
  margin: 0 auto;
  height: 35px;
  border: 3px solid #409eff;
  border-left: transparent;
  animation: zhuan 0.5s linear infinite;
  border-radius: 50%;
}
@keyframes zhuan {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 100px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
